<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>MapBox GL JS Offline Example</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.css' rel='stylesheet' />

    
    <link href='mapbox-gl.css' rel='stylesheet' />
-->
    <script src='./mapbox-gl-unminified.js'></script>

    <!-- <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script> -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
// mapboxgl.accessToken = 'pk.your-own-code-here-for-online-maps';
mapboxgl.accessToken = 'NOT-REQUIRED-WITH-YOUR-VECTOR-TILES-DATA';
var bounds = [
    [13.0726062, 52.327972], // Southwest coordinates，西南坐标
    [13.7635234, 52.6799903]  // Northeast coordinates，东北坐标
];
var style = {
  // "maxBounds" : bounds,
  "version": 8,
  "sources": {
"countries": {
      "type": "vector",
      // "scheme": "tms",
      // "url": "mapbox://map-id"
      // "url": "http://tileserver.com/layer.json", 
      // "tiles": [location.origin+location.pathname+"countries/{z}/{x}/{y}.pbf"],
      "tiles": [location.origin+"/countries/{z}/{x}/{y}.pbf"],
      // "tileSize": 256,
      // "tiles": [location.origin+"/3857/{z}/{x}/{y}.pbf"],

      // "tiles": [location.origin+"/maptile/{z}/{x}/{y}.pbf"],
      "maxzoom": 15
    },

    "german": {
      "type": "vector",
      // "scheme": "tms",
      // "url": "mapbox://map-id"
      // "url": "http://tileserver.com/layer.json", 
      // "tiles": [location.origin+location.pathname+"countries/{z}/{x}/{y}.pbf"],
      // "tiles": [location.origin+"/countries/{z}/{x}/{y}.pbf"],
      "tiles": [location.origin+"/3857/{z}/{x}/{y}.pbf"],
      // "tileSize": 256,

      // "tiles": [location.origin+"/maptile/{z}/{x}/{y}.pbf"],
      "maxzoom": 15
    },
    
  },
  // "glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
  // "glyphs": location.origin+"/font/{fontstack}/{range}.pbf",
  "glyphs": location.origin + "font/{fontstack}/{range}.pbf",
  // "glyphs": location.origin+"/fonts/{fontstack}/{range}.pbf",
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "#FFFFFF"
    }
  },{
    "id": "country-glow-outer",
    "type": "line",
    "source": "countries",
    "source-layer": "country",
    "layout": {
      "line-join":"round"
    },
    "paint": {
      "line-color": "#226688",
      "line-width": 5,
    }
  },{
    "id": "country-glow-inner",
    "type": "line",
    "source": "countries",
    "source-layer": "country",
    "layout": {
      "line-join":"round"
    },
    "paint": {
      "line-color": "#226688",
      "line-width": {
        "stops": [[0,1.2],[1,1.6],[2,2],[3,2.4]]
      },
      "line-opacity":0.8,
    }
  // rainbow start
  },{
    "id": "area-white",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'ATA'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#F0F8FF"
    }
  },{
    "id": "area-red",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'AFG','ALD','BEN','BLR','BWA','COK','COL','DNK','DOM','ERI','FIN','FRA','FRO','GIB','GNB','GNQ','GRC','GTM','JPN','KIR','LKA','MHL','MMR','MWI','NCL','OMN','RWA','SMR','SVK','SYR','TCD','TON','URY','WLF'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#fdaf6b"
    }
  },{
    "id": "area-orange",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'AZE','BGD','CHL','CMR','CSI','DEU','DJI','GUY','HUN','IOA','JAM','LBN','LBY','LSO','MDG','MKD','MNG','MRT','NIU','NZL','PCN','PYF','SAU','SHN','STP','TTO','UGA','UZB','ZMB'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#fdc663"
    }
  },{
    "id": "area-yellow",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'AGO','ASM','ATF','BDI','BFA','BGR','BLZ','BRA','CHN','CRI','ESP','HKG','HRV','IDN','IRN','ISR','KNA','LBR','LCA','MAC','MUS','NOR','PLW','POL','PRI','SDN','TUN','UMI','USA','USG','VIR','VUT'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#fae364"
    }
  },{
    "id": "area-green",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'ARE','ARG','BHS','CIV','CLP','DMA','ETH','GAB','GRD','GRL','HMD','IND','IOT','IRL','IRQ','ITA','KOS','LUX','MEX','NAM','NER','PHL','PRT','RUS','SEN','SUR','TZA','VAT'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#d3e46f"
    }
  },{
    "id": "area-turquoise",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'AUT','BEL','BHR','BMU','BRB','CYN','DZA','EST','FLK','GMB','GUM','HND','JEY','KGZ','LIE','MAF','MDA','NGA','NRU','SLB','SOL','SRB','SWZ','THA','TUR','VEN','VGB'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#aadb78"
    }
  },{
    "id": "area-blue",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'AIA','BIH','BLM','BRN','CAF','CHE','COM','CPV','CUB','ECU','ESB','FSM','GAZ','GBR','GEO','KEN','LTU','MAR','MCO','MDV','NFK','NPL','PNG','PRY','QAT','SLE','SPM','SYC','TCA','TKM','TLS','VNM','WEB','WSB','YEM','ZWE'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#a3cec5"
    }
  },{
    "id": "area-purple",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'ABW','ALB','AND','ATC','BOL','COD','CUW','CYM','CYP','EGY','FJI','GGY','IMN','KAB','KAZ','KWT','LAO','MLI','MNP','MSR','MYS','NIC','NLD','PAK','PAN','PRK','ROU','SGS','SVN','SWE','TGO','TWN','VCT','ZAF'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#ceb5cf"
    }
  },{
    "id": "area-pink",
    "type": "fill",
    "source": "countries",
    "filter":["in","ADM0_A3",'ARM','ATG','AUS','BTN','CAN','COG','CZE','GHA','GIN','HTI','ISL','JOR','KHM','KOR','LVA','MLT','MNE','MOZ','PER','SAH','SGP','SLV','SOM','TJK','TUV','UKR','WSM'],
    "source-layer": "country",
    "paint": {
      "fill-color": "#f3c1d3"
    }
  // rainbow end
  },{
    "id": "geo-lines",
    "type": "line",
    "source": "countries",
    "source-layer": "geo-lines",
    "paint": {
      "line-color": "#226688",
      "line-width": {
        "stops": [[0,0.2],[4,1]]
      },
      "line-dasharray":[6,2]
    }
  },{
    "id": "land-border-country",
    "type": "line",
    "source": "countries",
    "source-layer": "land-border-country",
    "paint": {
      "line-color": "#fff",
      "line-width": {
        "base":1.5,
        "stops": [[0,0],[1,0.8],[2,1]]
      }
    }
  },{
    "id": "state",
    "type": "line",
    "source": "countries",
    "source-layer": "state",
    "minzoom": 3,
    "filter": ["in","ADM0_A3",'USA','CAN','AUS'],
    "paint": {
      "line-color": "#226688",
      "line-opacity": 0.25,
      "line-dasharray":[6,2,2,2],
      "line-width": 1.2
    }
  // LABELS
  },{
    "id": "country-abbrev",
    "type": "symbol",
    "source": "countries",
    "source-layer": "country-name",
    "minzoom":1.8,
    "maxzoom":3,
    "layout": {
      "text-field": "{ABBREV}",
      "text-font": ["Open Sans Semibold"],
      "text-transform": "uppercase",
      "text-max-width": 20,
      "text-size": {
        "stops": [[3,10],[4,11],[5,12],[6,16]]
      },
      "text-letter-spacing": {
        "stops": [[4,0],[5,1],[6,2]]
      },
      "text-line-height": {
        "stops": [[5,1.2],[6,2]]
      }
    },
    "paint": {
      "text-halo-color": "#fff",
      "text-halo-width": 1.5
    }
  },{
    "id": "country-name",
    "type": "symbol",
    "source": "countries",
    "source-layer": "country-name",
    "minzoom":3,
    "layout": {
      "text-field": "{NAME}",
      "text-font": ["Open Sans Semibold"],
      "text-transform": "uppercase",
      "text-max-width": 20,
      "text-size": {
        "stops": [[3,10],[4,11],[5,12],[6,16]]
      }
    },
    "paint": {
      "text-halo-color": "#fff",
      "text-halo-width": 1.5
    }
  },{
    "id": "geo-lines-lables",
    "type": "symbol",
    "source": "countries",
    "source-layer": "geo-lines",
    "minzoom":1,
    "layout": {
      "text-field": "{DISPLAY}",
      "text-font": ["Open Sans Semibold"],
      "text-offset": [0,1],
      "symbol-placement": "line",
      "symbol-spacing": 600,
      "text-size": 9
    },
    "paint": {
      "text-color": "#226688",
      "text-halo-width": 1.5
    }
  },{
          "id": "123",
           "type": "line",
           "source": "german",
           "source-layer": "gis_osm_roads_free_1",
           "paint": {
            // "fill-color": "#00ffff",
      "line-color": "#fff",
      "line-blur": 0,
      // "line-width": {
      //   "base":1.5,
      //   // "stops": [[0,0],[1,0.8],[2,1]]
      // }
    }
          //  "source-layer": "gis_osm_roads_free_1"
      }]
};

var map = new mapboxgl.Map({
  container: 'map',
  // center: [8.3221, 46.5928],
  center: [13.5, 52.5],
  // center: [105.7350860781, 34.3459367715],
  zoom: 1,

  style: style
});

// map.addControl(new mapboxgl.Navigation());
</script>

</body>
</html>